<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .con .header{
          
        }
        .con .center{
          
        }
        .con .center table{
          /* background: red; */
          border: 1px solid red;
          width: 100%;
        }
        .con .center table .btn_add_group button{
            width: 50px;
        }
        .con .footer{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="header">
            <div id="logo">
                <img src="../img/java.png" width="100px" height="50px" alt="">
                购物车
            </div>
            <span class="btn_0" id="btn_close">
                关闭
            </span>
        </div>
        <div class="center">
            <table>
                <thead>
                    <tr>
                        <th全选</th>
                        <th>商品信息</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>金额</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>
                            <img src="../img/快乐加倍.png" alt="" width="80px" height="100px">
                            <span>白岩松：白说</span>
                        </td>
                      
                        <td>
                            ￥21.99
                        </td>
                        <td>
                            <div class="btn_add_group">
                                <button>-</button>
                                <input type="text" name="" id="">
                                <button>+</button>
                            </div>
                        </td>
                        <td> ￥21.99</td>
                        <td> 
                            <div>
                                <a href="#" onclick="moveFav(1)">移入收藏</a>
                            </div>
                            <div>
                                <a href="#" onclick="delPro(this)">删除</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>
                            <img src="../img/快乐加倍.png" alt="" width="80px" height="100px">
                            <span>白岩松：白说</span>
                        </td>
                      
                        <td>
                            ￥21.99
                        </td>
                        <td>
                            <div class="btn_add_group">
                                <button>-</button>
                                <input type="text" name="" id="">
                                <button>+</button>
                            </div>
                        </td>
                        <td> ￥21.99</td>
                        <td> 
                            <div>
                                <a href="#" onclick="moveFav(2)">移入收藏</a>
                            </div>
                            <div>
                                <a href="#" onclick="delPro(this)">删除</a>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="footer">
            <input type="checkbox" name="" id="">全选
            <a href="#">批量删除</a>
            <span>已选择2件商品</span>
            <div>
                <p>
                    总计（不含运费）：￥46
                </p>
                <p>
                    已节省：￥0.00
                </p>
            </div>
            <span class="btn_1" onclick="jiesuan()">
                结算
            </span>
        </div>
    </div>

    <script>
        document.getElementById("btn_close").onclick=function(){
            
            if(confirm("是否关闭窗口")){
                window.close();
            }
        
        }
        function moveFav(proId){
            alert("移入收藏："+proId)
        }
        function delPro(obj){
            // console.log(obj.parentNode.parentNode.parentNode);
            // obj.parentNode.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode.parentNode)
            if(confirm("是否删除商品"+obj)){
                debugger
                console.log(obj);
                // obj.parentNode.parentNode.parentNode.remove()
                obj.parentNode.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode.parentNode)
               alert("删除成功");
            }
        }
        function jiesuan(){
            //TODO 计算单价数量的乘集，求和
            alert("结算成功"+999);
        }
    </script>
</body>
</html>